<template>
  <div :style="{height: mainHeight+'px'}">
    <NavBarByUser @cancelLoginGuide="cancelLoginGuide"
                  :isLogin="isLogin"
                  :isShowLoginGuide="isShowLoginGuide"
                  :isShowCardCase="true"
                  @loginSuccess="loginSuccess"
                  @loginFailed="loginFailed"
                  :avatarUrl.sync="avatarUrl" />
    <scroll-view :style="{height: scrollContentHeight+'px'}"
                 class="dynamic-content"
                 :scroll-y="true"
                 :enable-back-to-top="true"
                 :scroll-anchoring="true"
                 @scrolltoupper='scrolltoupper'>
      <SelfSwiper v-if="company.photos && company.photos.length"
                  :imgUrls="company.photos"
                  :self_class="'h211'"
                  @swiperChange="swiperChange"></SelfSwiper>

      <!--公司介绍-->
      <div class="pl15 pr15"
           v-if="company.companyIntroduce">
        <p class="lh45 fs16 c38 fbold">公司介绍</p>

        <div class="bgfff shadow_gray pl15 pt20 pb15 pr15 fs16 bradius5">
          <div v-html="company.companyIntroduce"></div>
        </div>

      </div>

      <!--产品介绍-->
      <div class="pl15 pr15"
           v-if="company.goodsIntroduce">
        <p class="lh45 fs16 c38 fbold">产品介绍</p>

        <div class="bgfff shadow_gray pl15 pt20 pb15 pr15 fs16 bradius5">
          <div v-html="company.goodsIntroduce"></div>
        </div>

      </div>

      <!--公司视频-->
      <div class="pl15 pr15"
           v-if="company.companyVideoModelList">
        <p class="lh45 fs16 c38 fbold">企业视频</p>
        <div class="disflex wrap jsbet">
          <!--<div class="bgfff h211 shadow_gray">{{}}</div>-->
          <div v-for="(videoItem, index) in company.companyVideoModelList"
               :key="index"
               class="bgfff overhidden firstVideo"
               :class="{mt15: index > 0}">
            <video :id="'myVideo'+ videoItem.videoId"
                   class="disblock"
                   v-if="playIndex === videoItem.videoId"
                   :title="videoItem.describes"
                   :src="videoItem.url"
                   objectFit="cover"
                   enable-danmu
                   danmu-btn
                   controls
                   :autoplay="true"></video>
            <div class="w100p h194 posre"
                 @click="showVideo(videoItem.videoId)"
                 v-else>
              <img mode="aspectFill"
                   :src="videoItem.cover || 'https://you-one-stand.oss-cn-shanghai.aliyuncs.com/one-www/photo/20190604/1559619324240.png'"
                   alt=""
                   class="w100p h194">
              <img src="https://you-one-stand.oss-cn-shanghai.aliyuncs.com/one-www/photo/20190604/1559619365051.png"
                   alt=""
                   class="w50 h50 posab top0 left0 right0 bottom0 mauto">
            </div>
            <div class="fs14 pl15 c38 fbold">{{videoItem.describes}}</div>
          </div>
        </div>
        <!--src="http://wxsnsdy.tc.qq.com/105/20210/snsdyvideodownload?filekey=30280201010421301f0201690402534804102ca905ce620b1241b726bc41dcff44e00204012882540400&bizid=1023&hy=SH&fileparam=302c020101042530230204136ffd93020457e3c4ff02024ef202031e8d7f02030f42400204045a320a0201000400"-->
        <!--:src="company.videoUrl"-->

      </div>

      <!--企业招聘-->
      <div class="pl15 pr15"
           v-if="invites.length">
        <p class="lh45 fs16 c38 fbold">企业招聘</p>

        <div class="bgfff pt15 pl16 pr15 pb15 shadow_gray mb10 bradius5"
             @click="page_turn('joinUsDetail' , v.recruitId)"
             v-for="(v,k) in invites"
             :key="k">
          <p class="disflex jsbet fs14">
            <span class="c38 fbold">{{v.position}}</span>
            <span class="cblue fbold">{{v.salary}}</span>
          </p>

          <div class="disflex jsbet fs12 ca8 pt13">
            <div>
              {{v.recruitAddress}} | {{experienceArray[v.experience-1].title}} | {{educatArray[v.education-1].title}}
            </div>
          </div>
        </div>

      </div>

      <!--关于我们-->
      <div class="pl15 pr15">
        <p class="lh45 fs16 c38 fbold">关于我们</p>

        <div class="bgfff pt15 pl16 pr15 pb19 shadow_gray mb10 bradius5"
             v-if="company.phone">
          <p class="fs12 ca8 ">联系电话</p>

          <div class="disflex jsbet pt15"
               @click="makePhone">
            <div class="fs14 c38 fbold">{{company.phone}}</div>

            <div class="pl16 left_line disflex column-reverse">
              <img src="https://you-one-stand.oss-cn-shanghai.aliyuncs.com/yimai_photos/user/tel_blue.png"
                   alt=""
                   class="w16 h16">
            </div>

          </div>
        </div>

        <div class="bgfff pt15 pl16 pr15 pb19 shadow_gray mb12 bradius5"
             v-if="company.address"
             @click="openAddr(company.address)
            ">
          <p class="fs12 ca8">公司地址</p>

          <div class="disflex jsbet pt15">
            <div class="fs14 c38 fbold">{{company.address}}</div>
            <div class="pl16 left_line disflex column-reverse">
              <img src="https://you-one-stand.oss-cn-shanghai.aliyuncs.com/yimai_photos/user/addr_2.png"
                   alt=""
                   class="w16 h16">
            </div>
          </div>
        </div>

        <!--联系我们-->
        <div class="bgfff shadow_gray bradius5 pt25 pb25 pl25 pr25">
          <p class="under_line textc fs16 c38 fbold pb27">联系我们</p>

          <input type="text"
                 class="w100p bgf5f6 bradius5 lh39 h39 borderbox  pl10 fs14 ca8 phe8 mb10"
                 placeholder="请填写您的姓名"
                 v-model="form.name">
          <input type="text"
                 class="w100p bgf5f6 bradius5 lh39 h39 borderbox  pl10 fs14 ca8 phe8 mb10"
                 placeholder="请填写您的联系电话"
                 v-model="form.tel">
          <input type="text"
                 class="w100p bgf5f6 bradius5 lh39 h39 borderbox  pl10 fs14 ca8 phe8 mb15"
                 placeholder="请填写您的需求"
                 v-model="form.text">

          <div class="w100p bg_line_blue cfff textc fs18 lh44 bradius5"
               @click="formConfirm">立即提交</div>
        </div>

      </div>

      <!--bottom-->
      <div class="textc pb15 fs12 ca8 bgf5f6 pt15">- 到底了，看看其他的吧 -</div>
    </scroll-view>
    <FloatButtons class="float-buttons"
                  :isShowTalk="isShowTalk"
                  :avatarUrl="targetAvatarUrl"
                  @talk="talk"
                  @loginGuide="loginGuide"></FloatButtons>

  </div>
</template>

<script>
import SelfSwiper from "@/components/swiper"; //
import WXAJAX from "../../utils/request";
import amapFile from "../../libs/amap-wx.js";
import util from "../../utils/index";
import { authSubscribeMessage } from "../../utils/auth.js";
import { mapState, mapGetters } from "vuex";
import FloatButtons from "@/components/FloatButtons.vue";
import NavBarByUser from "@/components/NavBarByUser.vue";
import HandleLogin from "@/utils/handleLogin";
import QQMapWX from "../../utils/map/qqmap-wx-jssdk.js";

export default {
  name: "",
  components: { SelfSwiper, NavBarByUser, FloatButtons },
  data() {
    return {
      img:
        "https://you-one-stand.oss-cn-shanghai.aliyuncs.com/yimai_photos/user/food.jpg",
      images: [{ url: this.img }, { url: this.img }],
      playIndex: "",
      imgUrls: [
        {
          img: this.img,
          url:
            "/_pages/common/webview/main?url=https://wechat.benmu-health.com/mobile/app/common/material/render/17"
        },
        {
          img: this.img,
          url: "/pages/checkup/filterPackage/index?category=PARENTS_CHECKUP"
        }
      ],
      COMPANYID: 0,
      myAmapFun: "",
      Mc: "",
      form: {
        name: "",
        tel: "",
        text: ""
      },
      company: {
        accuracy: "", //经度
        dimension: "" //维度
      },
      invites: [],
      locat: {
        lat: 30.5702,
        lng: 104.06476
      },
      /*学历*/
      educatArray: [
        { title: "全部", id: 1 },
        { title: "初中及以下", id: 2 },
        { title: "中专/中技", id: 3 },
        { title: "高中", id: 4 },
        { title: "大专", id: 5 },
        { title: "本科", id: 6 },
        { title: "硕士", id: 7 },
        { title: "博士", id: 8 }
      ],
      /*经验*/
      experienceArray: [
        { title: "应届生", id: 1 },
        { title: "1年以内", id: 2 },
        { title: "1-3年", id: 3 },
        { title: "3-5年", id: 4 },
        { title: "5-10年", id: 5 },
        { title: "10年以上", id: 6 },
        { title: "全部", id: 7 }
      ],
      videoContext: null,

      avatarUrl: "", //用户的头像地址,
      isLogin: HandleLogin.returnIsLogin() || false, //是否已经登录
      isShowTalk: true, //是否显示右边侧边栏的聊一聊
      isShowLoginGuide: true, //是否显示登录引导页,
      targetAvatarUrl: "", //当前目标的人物头像,
      scrollContentHeight: 0, //中间滚动区域的高度
      mainHeight: 0, //整体高度
      isLoading: false
    };
  },
  /** tab点击 */
  onTabItemTap(item) {
    authSubscribeMessage(this.subscriptionNew);
  },
  onShow() {
    wx.setNavigationBarTitle({
      title: "官网"
    });
    this.playIndex = "";
    let lastCompanyid = this.COMPANYID;
    this.Mc = wx.createMapContext("map");
    this.myAmapFun = new amapFile.AMapWX({
      key: "e11026819b6d300fda6a2c680fbd2fef"
    });
    //获取当前的公司
    this.COMPANYID = wx.getStorageSync("COMPANYID") || 1;
    //获取官网信息
    if (lastCompanyid != this.COMPANYID || !this.COMPANYID) {
      this.inits();
      // this.getInvite();
    }
    this.isLogin = HandleLogin.returnIsLogin() || false;
    this.avatarUrl = wx.getStorageSync("avatarUrl") || "";
    //获取官网招聘信息
    //this.getInvite();
  },
  async mounted() {
    let a = await util.systemIfo();
    let navHeight = getApp().globalData.navHeight;
    this.mainHeight = a.windowHeight;
    this.scrollContentHeight = a.windowHeight - navHeight;
  },
  async onPullDownRefresh() {
    await this.inits();
    //获取官网招聘信息
    await this.getInvite();
    wx.stopPullDownRefresh();
  },
  methods: {
    //下拉刷新
    async scrolltoupper(e) {
      await this.inits();
      //获取官网招聘信息
      await this.getInvite();
    },
    //隐藏登录引导
    cancelLoginGuide() {
      this.isShowLoginGuide = false;
    },
    //需要登录引导的回调
    loginGuide() {
      this.isShowLoginGuide = true;
    },
    //聊一聊
    talk() {
      authSubscribeMessage(this.subscriptionNew);
      wx.navigateTo({
        url:
          "../IM/main?userId=" +
          this.currentCompany.userId +
          "&logo=" +
          this.currentCompany.logo +
          "&type=2&cardId=" +
          this.currentCompany.cardId +
          "&name=" +
          this.currentCompany.name +
          "&wxCode=" +
          (this.currentCompany.personalWx || "") +
          "&phone=" +
          this.currentCompany.phone
      });
    },
    //头像登录成功的回调
    loginSuccess(url) {
      this.isLogin = true;
      this.hasCard = wx.getStorageSync("hasCard") || false;
      this.avatarUrl = wx.getStorageSync("avatarUrl") || "";
    },
    loginFailed() {
      this.isShowLoginGuide = true;
    },
    cancelLoading() {
      setTimeout(() => {
        this.isLoading = false;
      }, 2000);
    },
    async inits() {
      //获取官网信息
      this.invites = [];
      if (this.isLoading) return;
      this.isLoading = true;
      return new Promise((resolve, reject) => {
        let v = this;
        // wx.showLoading();
        WXAJAX.POST(
          {
            companyId: v.COMPANYID,
            cardId: wx.getStorageSync("CARDID")
          },
          "",
          "/personal/getWebsiteInfo/V2"
        )
          .then(data => {
            if (data) {
              if (data.photos) {
                data.photos = data.photos.split(",");
              } else {
                data.photos = [];
              }
              v.company = data;
              if (data.recruitModelList) {
                data.recruitModelList.forEach(function(i, k) {
                  i.salary =
                    i.minSalary / 100000 + "k - " + i.maxSalary / 100000 + "k";
                });
              }
              v.invites = data.recruitModelList ? data.recruitModelList : [];
            }
            wx.hideLoading();
            this.cancelLoading();
          })
          .catch(err => {
            console.log(err);
            this.cancelLoading();
            wx.hideLoading();
          })
          .catch(() => {
            this.cancelLoading();
            resolve();
          });
      });
    },
    async getInvite() {
      if (this.isLoading) return;
      return new Promise((resolve, reject) => {
        let v = this;
        wx.showLoading();
        WXAJAX.POST(
          {
            companyId: v.COMPANYID
          },
          "",
          "/personal/getCompanyRecruit"
        )
          .then(data => {
            data.forEach(function(i, k) {
              i.salary =
                i.minSalary / 100000 + "k - " + i.maxSalary / 100000 + "k";
            });
            v.invites = data;
            wx.hideLoading();
          })
          .catch(err => {
            wx.hideLoading();
          })
          .catch(() => {
            resolve();
          });
      });
    },
    showVideo(index) {
      this.playIndex = index;
    },
    //轮播图的切换事件
    swiperChange(current) {
      // console.log(current)
    },
    page_turn(url, recruitId) {
      wx.navigateTo({ url: "../" + url + "/main?recruitId=" + recruitId });
    },
    openAddr(address) {
      wx.showLoading({
        mask: true
      });
      let qqmapsdk = new QQMapWX({
        key: "NJVBZ-P4NK6-MXISU-E7KXN-J2T2T-J4BZQ"
      });
      if (address == "" || !address) {
        wx.showToast({
          title: "请先添加公司地址",
          icon: "none"
        });
        return false;
      }
      let latitude = "";
      let longitude = "";
      qqmapsdk.search({
        keyword: address,
        success: function(res) {
          latitude = res.data[0].location.lat;
          longitude = res.data[0].location.lng;
          wx.openLocation({
            latitude,
            longitude,
            name: address,
            scale: 18,
            success() {
              wx.hideLoading();
            }
          });
        },
        fail: function(res) {},
        complete: function(res) {}
      });
    },
    formConfirm() {
      //表单提交
      authSubscribeMessage(this.subscriptionNew);
      if (!this.form.name) {
        wx.showToast({
          title: "请输入您的姓名！",
          icon: "none"
        });
        return;
      }
      if (!this.form.tel || !util.checkPhone(this.form.tel)) {
        wx.showToast({
          title: "请输入正确的电话！",
          icon: "none"
        });
        return;
      }
      if (!this.form.text) {
        wx.showToast({
          title: "请填写您的需求！",
          icon: "none"
        });
        return;
      }
      let v = this;
      wx.showLoading();
      WXAJAX.POST(
        {
          companyId: v.COMPANYID,
          name: v.form.name,
          phone: v.form.tel,
          text: v.form.text,
          cardId: wx.getStorageSync("CARDID")
        },
        "",
        "/personal/addDemand"
      )
        .then(data => {
          wx.hideLoading();
          if (data) {
            v.form = {
              name: "",
              tel: "",
              text: ""
            };
            wx.showToast({
              title: "提交成功！",
              icon: "success"
            });
          }
        })
        .catch(err => {
          wx.hideLoading();
        });
    },
    makePhone() {
      //拨打电话
      util.MakePhone(String(this.company.phone));
    }
  },
  computed: {
    ...mapState({
      currentCompany: state => state.currentCompany
    }),
    ...mapGetters(["subscriptionNew"])
  },
  watch: {
    currentCompany: {
      deep: true,
      immediate: true,
      handler(newVal) {
        if (newVal) {
          if (newVal.userId === wx.getStorageSync("userId")) {
            this.isShowTalk = false;
          } else {
            this.isShowTalk = true;
            this.targetAvatarUrl = newVal.logo;
          }
        }
      }
    }
  }
};
</script>

<style>
.left_line {
  position: relative;
  padding-left: 36upx;
}

.left_line::before {
  content: "";
  position: absolute;
  left: 0;
  width: 1upx;
  height: 26upx;
  background: #a8a8a8;
  bottom: 4upx;
}

.under_line {
  position: relative;
}

.under_line::before {
  content: "";
  position: absolute;
  bottom: 30upx;
  width: 50upx;
  height: 4upx;
  background: #51cdcb;
  left: 0;
  right: 0;
  margin: auto;
}

video {
  width: 100%;
  height: 388upx;
  border-radius: 10upx 10upx 0 0;
}
.firstVideo {
  width: 100%;
  border-radius: 10upx;
}
.firstVideo div {
  line-height: 84upx;
}
.notFirstVideo {
  width: 336upx;
  margin-top: 20upx;
  border-radius: 10upx 10upx 0 0;
}
.notFirstVideo video {
  height: 188upx;
}
.notFirstVideo div {
  line-height: 48upx;
}
</style>
